<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="zh"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="zh"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="zh"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="zh"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>ECharts 3.4 版本发布：新增象形柱图、主题河流图、水球图 </title>
<meta name="description" content="在 ECharts 新发布的 3.4 版本中，新增象形柱图、主题河流图、水球图三种新图表。象形柱图利用图片和形状表现数据，主题河流图可以用来表示事件或主题等在一段时间内变化，水球图常用来展现百分比数据。">
<meta name="keywords" content="新版本, 扩展, 教程">



<!-- Open Graph -->
<meta property="og:locale" content="en_US">
<meta property="og:type" content="article">
<meta property="og:title" content="ECharts 3.4 版本发布：新增象形柱图、主题河流图、水球图">
<meta property="og:description" content="在 ECharts 新发布的 3.4 版本中，新增象形柱图、主题河流图、水球图三种新图表。象形柱图利用图片和形状表现数据，主题河流图可以用来表示事件或主题等在一段时间内变化，水球图常用来展现百分比数据。">
<meta property="og:url" content="http://echarts.baidu.com/blog/2017/01/13/new-release.html">
<meta property="og:site_name" content="">





<link rel="canonical" href="http://echarts.baidu.com/blog/2017/01/13/new-release.html">
<link href="http://echarts.baidu.com/blog/feed.xml" type="application/atom+xml" rel="alternate" title=" Feed">

<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- For all browsers -->
<link rel="stylesheet" href="http://echarts.baidu.com/blog/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="http://echarts.baidu.com/blog/assets/css/main.css">

<meta http-equiv="cleartype" content="on">

<!-- Load Modernizr -->
<script src="http://echarts.baidu.com/blog/assets/js/vendor/modernizr-2.6.2.custom.min.js"></script>

<!-- Icons -->
<!-- 16x16 -->
<link rel="shortcut icon" href="http://echarts.baidu.com/blog/favicon.ico">
<!-- 32x32 -->
<link rel="shortcut icon" href="http://echarts.baidu.com/blog/favicon.png">
<!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices -->
<link rel="apple-touch-icon-precomposed" href="http://echarts.baidu.com/blog/images/apple-touch-icon-precomposed.png">
<!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://echarts.baidu.com/blog/images/apple-touch-icon-72x72-precomposed.png">
<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://echarts.baidu.com/blog/images/apple-touch-icon-114x114-precomposed.png">
<!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://echarts.baidu.com/blog/images/apple-touch-icon-144x144-precomposed.png">

</head>

<body id="post" class="feature">

<!--[if lt IE 9]><div class="upgrade"><strong><a href="http://whatbrowser.org/">Your browser is quite old!</strong> Why not upgrade to a different browser to better enjoy this site?</a></div><![endif]-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="http://echarts.baidu.com/index.html" class="navbar-brand">
                <img src="http://echarts.baidu.com/images/logo.png" alt="echarts logo" class="navbar-logo">
            </a>
        </div>
        <div id="navbar-collapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-left">
                <li id="nav-index"><a href="http://echarts.baidu.com/index.html">首页</a></li>
                <li id="nav-doc" class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://echarts.baidu.com/feature.html">特性</a></li>
                        <li><a href="http://echarts.baidu.com/tutorial.html">教程</a></li>
                        <li><a href="http://echarts.baidu.com/api.html">API</a></li>
                        <li><a href="http://echarts.baidu.com/option.html">配置项手册</a></li>
                        <li><a href="http://echarts.baidu.com/faq.html">常见问题</a></li>
                        <li><a href="http://echarts.baidu.com/changelog.html">版本记录</a></li>
                    </ul>
                </li>
                <li id="nav-download" class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://echarts.baidu.com/download.html">下载</a></li>
                        <li><a href="http://echarts.baidu.com/download-theme.html">主题下载</a></li>
                        <li><a href="http://echarts.baidu.com/download-map.html">地图下载</a></li>
                        <li><a href="http://echarts.baidu.com/download-extension.html">扩展下载</a></li>
                    </ul>
                </li>
                <li id="nav-examples">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://echarts.baidu.com/examples.html">官方实例</a></li>
                        <li><a href="http://gallery.echartsjs.com/explore.html#tags=echarts-gl">GL 实例</a></li>
                    </ul>
                </li>
                <li id="nav-community" class="active">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://gallery.echartsjs.com">GALLERY</a></li>
                        <li><a href="http://echarts.baidu.com/blog">博客</a></li>
                    </ul>
                </li>
                <li id="nav-tool">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://echarts.baidu.com/spreadsheet.html">表格工具</a></li>
                        <li><a href="http://ecomfe.github.io/echarts-map-tool/">地图数据在线工具</a></li>
                        <li><a href="http://echarts.baidu.com/theme-builder/">主题构建工具</a></li>
                    </ul>
                </li>
                <li id="nav-about"><a href="http://echarts.baidu.com/about.html">关于</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="http://echarts.baidu.com/images/github.png" width="18"></a></li>
                <li id="nav-2" class="0"><a href="http://echarts.baidu.com/echarts2/">2.0</a></li>
                <li id="nav-homeen"><a href="https://ecomfe.github.io/echarts-doc/public/en/index.html">EN</a></li>
            </ul>
        </div>
    </div>
</nav>



<div class="entry-header">
  
  <div class="entry-image">
    <img src="http://echarts.baidu.com/blog/images/post/2017-01-13-new-release-theme-river.png" alt="ECharts 3.4 版本发布：新增象形柱图、主题河流图、水球图">
  </div><!-- /.entry-image -->
</div><!-- /.entry-header -->


<div id="post-main" role="main">
  <article class="hentry">
    <header class="header-title">
      <div class="header-title-wrap">
        <h1 class="entry-title">ECharts 3.4 版本发布：新增象形柱图、主题河流图、水球图</h1>
        <h2><span class="entry-date date published"><time datetime="2017-01-13T00:00:00+08:00">2017-01-13</time></span></h2>
        
      </div><!-- /.header-title-wrap -->
    </header>
    <div class="entry-content">
      <p>在 ECharts 新发布的 3.4 版本中，新增象形柱图、主题河流图、水球图三种新图表。象形柱图利用图片和形状表现数据，主题河流图可以用来表示事件或主题等在一段时间内变化，水球图常用来展现百分比数据。</p>

<h2 id="象形柱图">象形柱图</h2>

<p>象形柱图是可以设置各种具象图形元素（如图片、<a href="http://www.w3.org/TR/SVG/paths.html#PathData">SVG PathData</a> 等）的柱状图。往往用在信息图中，用于有至少一个类目轴或时间轴的<a href="http://echarts.baidu.com/option.html#grid">直角坐标系</a>上。</p>

<p>它既可以用图形的长宽变形表现数据，也可以用图形的个数、甚至是图形的颜色、透明度变化表现数据。</p>

<p>在下面的例子中，右边的两座山分别是一个图片，而最左侧的纸是由多个图片堆加成的，象形柱图会根据它们所在系列对应的数值，决定其高度。配合动画效果，能够实现很好的视觉效果。</p>

<iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=pictorialBar-hill"></iframe>

<p>在 <a href="http://jing.baidu.com/h5/echarts-christmas-2016.html">ECharts 圣诞活动页</a>中，我们制作了以下这个驯鹿和交通方式的速度对比图，这样的图表可以使用 ECharts 象形柱图方便地实现。下图包含两个系列，一个是显示在上方的交通方式矢量图标，象形柱图默认会将每个图标放在对应值所在位置的下方，通过 <code class="highlighter-rouge">symbolSize</code> 指定图标大小；另一个系列是显示在图标下方的山峰，在不指定 <code class="highlighter-rouge">symbolSize</code> 的情况下，将填充满所在的“柱子”，因而就有了图示效果。</p>

<iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=pictorialBar-velocity"></iframe>

<p>除此之外，象形柱图还可以用同一图形的个数表现数值，实现类似 ECharts 圣诞活动页中一群小精灵的效果。因而象形柱图可以很大程度上满足信息图的制图需求。</p>

<iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=pictorialBar-spirit"></iframe>

<p>从 3.4 版本起，象形柱图将被包含在 <a href="http://echarts.baidu.com/download.html">ECharts 下载页面</a>的“完整”版本中，无需引入额外文件，通过将系列名称设为 <code class="highlighter-rouge">pictorialBar</code> 即可使用。</p>

<p>更多例子请前往<a href="http://echarts.baidu.com/examples.html#chart-type-pictorialBar">官网例子</a>查看。</p>

<h2 id="主题河流图">主题河流图</h2>

<p>主题河流图是一种特殊的流图，它主要用来表示事件或主题等在一段时间内的变化。</p>

<p>主题河流中不同颜色的条带状河流分支编码了不同的事件或主题，河流分支的宽度编码了原数据集中的 <code class="highlighter-rouge">value</code> 值。此外，原数据集中的时间属性，映射到单个时间轴上。</p>

<iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=themeRiver-basic"></iframe>

<p>图中的每一个系列，可以是一个产品市场占有率的变化，也可以表示国家人口的变化等等事件或主题。</p>

<p>更多例子请前往<a href="http://echarts.baidu.com/examples.html#chart-type-themeRiver">官网例子</a>查看。</p>

<h2 id="水球图">水球图</h2>

<p>水球图的使用方式非常简单，实现以下这样的效果，只需要将系列类型设为 <code class="highlighter-rouge">liquidFill</code>，并且指定数据即可。</p>

<iframe style="width: 100%; height: 300px" src="http://gallery.echartsjs.com/view.html?cid=liquidfill-basic"></iframe>

<p>对应的代码为：</p>

<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="nx">option</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">series</span><span class="p">:</span> <span class="p">[{</span>
        <span class="na">type</span><span class="p">:</span> <span class="s1">'liquidFill'</span><span class="p">,</span>
        <span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.6</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mf">0.3</span><span class="p">]</span>
    <span class="p">}]</span>
<span class="p">};</span>
</code></pre>
</div>

<p>水球图的个性化程度非常高，你可以为每个波指定波长、周期、相位、颜色、阴影、透明度等等属性，“水球”的形状可以是圆形、方形、三角形等等，甚至可以指定任意的 <a href="http://www.w3.org/TR/SVG/paths.html#PathData">SVG PathData</a>，因此可以制作出变化非常的效果。</p>

<iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=liquidfill-echarts"></iframe>

<p>我们在 ECharts 圣诞主题页实现的雪球下降的效果，即是用水球图实现的。</p>

<iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=christmas-gift-show"></iframe>

<p>和象形柱图、主题河流图不同的是，水球图是作为插件发布的。这意味着，在 ECharts 官网下载的完整版本将不包含水球图，使用时，需要在引入 <code class="highlighter-rouge">echarts.js</code> 之后，另外引入水球图对应的 <code class="highlighter-rouge">echarts-liquidfill.js</code>，可以在 <a href="https://github.com/ecomfe/echarts-liquidfill/tree/gh-pages/dist">GitHub</a> 找到最新版本。</p>

<p>如果感兴趣的话，可以前往<a href="https://github.com/ecomfe/echarts-liquidfill">水球图 GitHub 项目页面</a>了解更多，或者在 <a href="http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~query=liquidfill~author=all">Gallery</a> 页面查看更多效果。</p>

<h2 id="其他更新内容">其他更新内容</h2>

<ul>
  <li>
    <p>[+] <a href="http://echarts.baidu.com/option.html#series-map">map series</a> 可以使用用户指定的 <a href="http://echarts.baidu.com/option.html#geo">geo 坐标系</a> 了（原先是只能使用内置的 geo 坐标系）。从而，geo 坐标系可以使用 <a href="http://echarts.baidu.com/option.html#series-map">map series</a> 控制自身的颜色，并且 <a href="http://echarts.baidu.com/option.html#series-map">map series</a> 可以和其他类型的 series（如 <a href="http://echarts.baidu.com/option.html#series-scatter">scatter series</a>）共享 geo 坐标系。参见 <a href="http://echarts.baidu.com/option.html#series-map.geoIndex">series-map.geoIndex</a>。</p>
  </li>
  <li>
    <p>[+] 增加了 <a href="http://echarts.baidu.com/api.html#action.graph.focusNodeAdjacency">focusNodeAdjacency action</a>，从而能用 API 控制 <a href="http://echarts.baidu.com/option.html#series-geo">graph</a> 的连接高亮。</p>
  </li>
  <li>
    <p>[+] 增加了 <a href="http://echarts.baidu.com/option.html#series-pie.animationType">series-pie.animationType</a>，支持不同的饼图动画效果。</p>
  </li>
  <li>
    <p>[+] <a href="http://echarts.baidu.com/option.html#animationDuration">animationDuration</a> 增加了回调函数支持，可以根据不同的数据项得到不同的动画时长。</p>
  </li>
  <li>
    <p>[+] <a href="http://echarts.baidu.com/option.html#xAxis.type">category axis</a> 支持了 <a href="http://echarts.baidu.com/option.html#xAxis.min">min</a> <a href="http://echarts.baidu.com/option.html#xAxis.max">max</a> 的设置。</p>
  </li>
  <li>
    <p>[+] <a href="http://echarts.baidu.com/option.html#xAxis.type">category axis</a> 默认情况会显示所有的类目，不论是否有类目中没有数据（原先两端的没有数据的类目不会被显示）。</p>
  </li>
  <li>
    <p>[+] <a href="http://echarts.baidu.com/option.html#singleAxis">singleAxis</a> 中的 <code class="highlighter-rouge">data</code> 支持了一维数组的数据格式，如 <code class="highlighter-rouge">[11, 23, 44]</code>。</p>
  </li>
  <li>
    <p>[+] <a href="http://echarts.baidu.com/option.html#dataZoom">dataZoom</a> 支持了 <a href="http://echarts.baidu.com/option.html#singleAxis">singleAxis</a>。</p>
  </li>
  <li>
    <p>[+] 开放了 throttle 工具方法：<code class="highlighter-rouge">chart.util.throttle</code>。</p>
  </li>
  <li>
    <p>[+] 优化了 <a href="http://echarts.baidu.com/option.html#grid">直角坐标系</a> 中数据全不显示时的显示效果。</p>
  </li>
  <li>
    <p>[+] <a href="http://echarts.baidu.com/option.html#series-candlestick">K 线图</a> 支持了 <a href="http://echarts.baidu.com/option.html#series-candlestick.barWidth">barWidth</a>，<a href="http://echarts.baidu.com/option.html#series-candlestick.barMinWidth">barMinWidth</a>，<a href="http://echarts.baidu.com/option.html#series-candlestick.barMaxWidth">barMaxWidth</a> 设置。参见 <a href="https://github.com/ecomfe/echarts/issues/4783">#4783</a>。</p>
  </li>
  <li>
    <p>[+] <a href="http://echarts.baidu.com/option.html#series-lines">线图</a> 支持了 <a href="http://echarts.baidu.com/option.html#series-lines.symbol">symbol</a>, <a href="http://echarts.baidu.com/option.html#series-lines.symbolSize">symbolSize</a> 设置。</p>
  </li>
  <li>
    <p>[+] 支持了 <a href="http://echarts.baidu.com/option.html#visualMap-piecewise">visualMap-piecewise</a> 中数据标签和首尾的文本同时显示。参见 <a href="http://echarts.baidu.com/option.html#visualMap-piecewise.showLabel">visualMap-piecewise.showLabel</a> 参见 <a href="https://github.com/ecomfe/echarts/issues/4845">#4845</a>。</p>
  </li>
  <li>
    <p>[+] 支持了 <a href="http://echarts.baidu.com/option.html#visualMap">visualMap</a> 支持系列中的某些数据不受 <code class="highlighter-rouge">visualMap</code> 控制。</p>
  </li>
  <li>
    <p>[^] 在 <a href="http://echarts.baidu.com/api.html#action.tooltip.showTip">showTip</a> 事件中开放了 <code class="highlighter-rouge">dataIndex</code> 参数。</p>
  </li>
  <li>
    <p>[^] 修复了 tooltip 中的 XSS 隐患。参见 <a href="https://github.com/ecomfe/echarts/issues/4769">#4769</a>。</p>
  </li>
  <li>
    <p>[^] 修复了 <a href="http://echarts.baidu.com/option.html#series-graph.edgeLabel">series-graph.edgeLabel</a> 中部分属性无效的问题。参见 <a href="https://github.com/ecomfe/echarts/issues/4555">#4555</a>。</p>
  </li>
  <li>
    <p>[^] 修复了 <a href="http://echarts.baidu.com/option.html#series-gauge">series-gauge</a> 中 <code class="highlighter-rouge">min</code> <code class="highlighter-rouge">max</code> 是 <code class="highlighter-rouge">stirng</code> 时的 tick 渲染问题。参见 <a href="https://github.com/ecomfe/echarts/issues/4617">#4617</a>。</p>
  </li>
  <li>
    <p>[^] 修复了 <a href="http://echarts.baidu.com/option.html#series-gauge.pointer.show">series-gauge.pointer.show</a> 的问题。参见 <a href="https://github.com/ecomfe/echarts/issues/4618">#4618</a>。</p>
  </li>
  <li>
    <p>[^] 修复了 <a href="http://echarts.baidu.com/option.html#series-radar">series-radar</a> 在无数据时渲染可能抛错的问题。</p>
  </li>
  <li>
    <p>[^] 修复了 <a href="http://echarts.baidu.com/option.html#series-line.markArea.label.normal.show">markArea.label.normal.show</a> 的问题。参见 <a href="https://github.com/ecomfe/echarts/issues/4723">#4723</a>。</p>
  </li>
  <li>
    <p>[^] 优化了 <a href="http://echarts.baidu.com/option.html#yAxis.type">log 数轴</a> 中，数据小于等于 0 时的处理。参见 <a href="https://github.com/ecomfe/echarts/issues/4743">#4743</a> 和 <a href="https://github.com/ecomfe/echarts/issues/3161">#3161</a>。</p>
  </li>
</ul>

<p><strong>欢迎前往 <a href="http://gallery.echartsjs.com/explore.html">ECharts Gallery</a> 创建自己的 ECharts 图表，更方便地提问，以及建立自己的作品集。2017 年，让我们一起将可视化做得更棒！</strong></p>


      <div class="entry-meta">
        <span class="tag-panel">
          
          <!--<a href="http://echarts.baidu.com/blog/tags/#新版本" title="Pages tagged 新版本" class="tag">-->
            <span class="term">新版本</span>
          <!--</a>-->
          
          
          <!--<a href="http://echarts.baidu.com/blog/tags/#扩展" title="Pages tagged 扩展" class="tag">-->
            <span class="term">扩展</span>
          <!--</a>-->
          
          
          <!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">-->
            <span class="term">教程</span>
          <!--</a>-->
          
          
        </span>
      </div>

      
    </div><!-- /.entry-content -->
    
    <div class="container">
  <div class="read-more">
    <h3>更多相关信息</h3>
    <div class="row">
      
      
      
      
      
      <div class="col-md-4">
        <div class="read-more-post">
          <h4><a href="http://echarts.baidu.com/blog/2017/06/14/building-realistic-map-with-echarts-gl.html" title="在 ECharts GL 中绘制三维地图">在 ECharts GL 中绘制三维地图</a></h4>
          <p>ECharts 前段时间发布了超亮眼的 GL，相对于之前已经圈粉无数的 ECharst-X 而言，ECharst GL 更是帅到爆，无论是性能、颜值、类型都有了巨大的飞跃。但是不是更易上手呢？答案是肯定的，用户除了能够根据数据画出诸如三维地图等三维的可视化图之外，只需要在项目中加入几个简单的配置项，就能配制出想要的风格的高质量画面效果。</p>
          <div class="tag-panel">
            
            <!--<a href="http://echarts.baidu.com/blog/tags/#新版本" title="Pages tagged 新版本" class="tag">-->
              <span class="term">新版本</span>
            <!--</a>-->
            
            <!--<a href="http://echarts.baidu.com/blog/tags/#扩展" title="Pages tagged 扩展" class="tag">-->
              <span class="term">扩展</span>
            <!--</a>-->
            
            <!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">-->
              <span class="term">教程</span>
            <!--</a>-->
            
          </div>
        </div>
      </div>
      
      
      
      
      
      <div class="col-md-4">
        <div class="read-more-post">
          <h4><a href="http://echarts.baidu.com/blog/2017/05/25/new-release.html" title="ECharts v3.6 发布：自定义系列、极坐标柱状图">ECharts v3.6 发布：自定义系列、极坐标柱状图</a></h4>
          <p>在 ECharts 新发布的 3.6 版本中，新增了自定义系列，能让用户定制渲染逻辑，从而在已有坐标系中创造新的图表。此外还有极坐标柱状图、自定义维度映射、dataZoom 等其他一些增强。</p>
          <div class="tag-panel">
            
            <!--<a href="http://echarts.baidu.com/blog/tags/#新版本" title="Pages tagged 新版本" class="tag">-->
              <span class="term">新版本</span>
            <!--</a>-->
            
            <!--<a href="http://echarts.baidu.com/blog/tags/#扩展" title="Pages tagged 扩展" class="tag">-->
              <span class="term">扩展</span>
            <!--</a>-->
            
            <!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">-->
              <span class="term">教程</span>
            <!--</a>-->
            
          </div>
        </div>
      </div>
      
      
      
      
      
      <div class="col-md-4">
        <div class="read-more-post">
          <h4><a href="http://echarts.baidu.com/blog/2017/05/09/echarts-statistical-extension-tutorial.html" title="ECharts 统计扩展教程">ECharts 统计扩展教程</a></h4>
          <p>你是否想了解一组样本数据的分布情况？你是否想根据用户的数值属性将用户分成不同的群体？你是否想预测两个变量的变化趋势？——什么？不需要？不要再违心了，小编已经听到来自你们内心深处的呐喊，今天就为大家推荐一款神器——ECharts 统计扩展，这是一个用来进行数据分析的扩展工具，包含的功能有直方图、聚类、回归、以及常用的汇总统计。通过统计扩展和 ECharts 的结合，可以使大家方便地实现可视分析，也就是将数据分析的结果，通过可视化直观地呈现出来。</p>
          <div class="tag-panel">
            
            <!--<a href="http://echarts.baidu.com/blog/tags/#新版本" title="Pages tagged 新版本" class="tag">-->
              <span class="term">新版本</span>
            <!--</a>-->
            
            <!--<a href="http://echarts.baidu.com/blog/tags/#扩展" title="Pages tagged 扩展" class="tag">-->
              <span class="term">扩展</span>
            <!--</a>-->
            
            <!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">-->
              <span class="term">教程</span>
            <!--</a>-->
            
          </div>
        </div>
      </div>
      
      
      
        
    </div>
  </div>
</div>

  </article>
</div><!-- /#main -->

<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-4 logo"><img src="http://echarts.baidu.com/images/echarts-footer-logo.png"/></div>
            <div id="efe-product" class="col-md-2 col-sm-4 pc">
                <h3>百度EFE更多产品</h3>
                <ul id="efe-product">
                    <li><a href="http://tushuo.baidu.com/?fr=echarts" target="_blank">图说</a></li>
                    <li><a href="https://ecomfe.github.io/san/?fr=echarts" target="_blank">SAN</a></li>
                    <li><a href="http://ecomfe.github.io/edp/?fr=echarts" target="_blank">EDP</a></li>
                    <li><a href="http://github.com/ecomfe/zrender/?fr=echarts" target="_blank">ZRender</a></li>
                    <li><a href="http://fecs.baidu.com/?fr=echarts" target="_blank">FECS</a></li>
                    <li><a href="http://ecomfe.github.io/fontmin/?fr=echarts" target="_blank">Fontmin</a></li>
                </ul>
            </div>
            <div class="col-md-3 col-md-offset-1 col-sm-4 pc">
                <h3>友情链接</h3>
                <ul>
                    <li><a href="https://fex.baidu.com/?fr=echarts" target="_blank">FEX</a></li>
                    <li><a href="http://bit.baidu.com/?fr=echarts" target="_blank">百度技术学院</a></li>
                    <li><a href="https://git.oschina.net/echarts/echarts?fr=echarts" target="_blank">码云镜像</a></li>
                </ul>
            </div>
            <div class="col-md-3" id="footer-icon-panel">
                <div class="icon-panel">
                    <a href="mailto:echarts@baidu.com" class="footer-icon">
                        <img src="http://echarts.baidu.com/images/icon-email.png"/>
                    </a>
                    <a href="https://twitter.com/EChartsJs" class="footer-icon">
                        <img src="http://echarts.baidu.com/images/icon-twitter.png"/>
                    </a>
                    <a href="http://weibo.com/u/5160877841" class="footer-icon">
                        <img src="http://echarts.baidu.com/images/icon-weibo.png"/>
                    </a>
                    <a href="https://github.com/ecomfe/echarts" class="footer-icon">
                        <img src="http://echarts.baidu.com/images/icon-github.png"/>
                    </a>
                </div>
                <div id="echarts-copyright">&#9400; 2017 百度ECharts团队出品</div>
            </div>
        </div>
    </div>
</footer>


<script src="http://echarts.baidu.com/blog/assets/js/vendor/jquery-1.9.1.min.js"></script>
<script src="http://echarts.baidu.com/vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="http://echarts.baidu.com/blog/assets/js/scripts.min.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?4bad1df23f079e0d12bdbef5e65b072f";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>



</body>
</html>
